import React from "react";
import { connect, Dispatch } from 'umi';
import { ItemType } from '../models/docs'

// 定义 Props 类型
interface DocsProps {
  list: ItemType[];
  dispatch: Dispatch;
}

class Docs extends React.Component<DocsProps> {
  constructor(props: DocsProps) {
    super(props);
  }
  /**
   * Class组件生命周期
   * 创建 constructor render componentDidMount
   * 更新 shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate
   * 卸载 componentWillUnmount
  */
  // 更新结束
  componentDidUpdate(prevProps: Readonly<DocsProps>, prevState: Readonly<{}>, snapshot?: any): void {
  }
  // 是否更新
  shouldComponentUpdate(nextProps: Readonly<DocsProps>, nextState: Readonly<{}>, nextContext: any): boolean {
    return true;
  }
  componentDidMount() { // 组件渲染后
    // 调用接口
    this.props.dispatch({ type: 'docs/getDate' })
  }
  render() {
    return (
      <div>
        <h1>这是Docs 页面</h1>
        <div>
          {this.props.list.map((item) => (
            <div key={item.id}>{item.title}</div>
          ))}
        </div>
      </div>
    );
  }
}

export default connect((store: { docs: { list: ItemType[] } }) => ({ list: store.docs.list }))(Docs);
